<template>
  <basic-dialog :visible="show"
                :title="type === 1 ? `添加设备`: `添加车间`"
                :min-width="'350px'"
                :isShowInnerLoading="isShowInnerLoading"
  >
    <q-form @submit="onSubmit"
            @reset="onReset"
            greedy
            ref="myForm"
            class="dialog-content form-inline block" style="padding-top: 20px">
      <q-select
        v-model="params.workshop"
        :options="workshopOptions"
        :rules="[val => val !== null || '不可为空']"
        dense
        options-dense
        emit-value
        map-options
        outlined
        placeholder="请选择车间"
      >
        <template v-slot:before>
          <label class="text-right name label-width font-size-16">
            <span class="text-red">*</span><span class="text-black">车间选择:</span>
          </label>
        </template>
        <template v-slot:no-option>
          <div class="no-option" />
        </template>
      </q-select>

      <q-select
        v-if="type===1"
        v-model="params.lineId"
        :options="LinesOptions"
        dense
        options-dense
        emit-value
        map-options
        outlined
        class="margin-b-20"
        placeholder="请选择产线"
      >
        <template v-slot:before>
          <label class="text-right name label-width font-size-16">
            <span class="text-black">产线选择:</span>
          </label>
        </template>
        <template v-slot:no-option>
          <div class="no-option" />
        </template>
      </q-select>

      <q-input v-else v-model.trim="params.count" autofocus outlined dense :rules="[val => val && (val && /^[1-9]\d?$/.test(val)) || '请输入正整数且不超过两位']">
        <template v-slot:before>
          <label class="text-right name relative-position"><span class="text-red">*</span>摄像头数量:</label>
        </template>
      </q-input>

      <q-separator style="margin-left: -20px;margin-right: -20px;width: calc(100% + 40px)" />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline
               label="取消"
               color="primary"
               class="q-mr-md"
               type="reset" />
        <q-btn unelevated
               label="下一步"
               v-throttle
               color="primary"
               type="submit" />
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
import { getDeviceDisCamera, getDisCamera, getLinesByWorkshop } from '../../../../boot/status-monitor/machine'
import _ from 'lodash'

export default {
  name: 'create-layout',
  props: {
    workshopList: {
      type: Array,
      default: () => []
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      show: false,
      workshopOptions: [],
      LinesOptions: [{
        label: '全部',
        value: ''
      }],
      isShowInnerLoading: false,
      params: {
        workshop: null,
        lineId: '',
        count: ''
      }
    }
  },
  watch: {
    'params.workshop': {
      handler (val) {
        if (val && this.type === 1) {
          this.getLines(val)
        }
      }
    }
  },
  methods: {
    showDialog () {
      this.show = true
      this.params = {
        workshop: null,
        lineId: ''
      }
      this.getWorkshopList()
    },
    getLines (id) {
      getLinesByWorkshop(id).then(res => {
        this.LinesOptions = res.data.map(item => {
          return {
            label: item.name,
            value: item.id
          }
        })
        this.params.lineId = ''
        this.LinesOptions.unshift({
          label: '全部',
          value: ''
        })
        this.isShowInnerLoading = false
      })
    },
    // 未设置布局图车间列表
    getWorkshopList () {
      this.isShowInnerLoading = true
      if (this.type === 1) {
        getDeviceDisCamera().then(res => {
          if (res.data.length) {
            const workshopOptions = res.data.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
            this.workshopOptions = workshopOptions.filter(item => this.workshopList.findIndex(workshop => workshop.name === item.value) === -1)
            this.params.workshop = this.workshopOptions.length > 0 ? this.workshopOptions[0].value : null
          } else {
            this.workshopOptions = []
            this.params.workshop = null
          }
          this.isShowInnerLoading = false
        })
      } else {
        getDisCamera().then(res => {
          if (res.data.length) {
            const workshopOptions = res.data.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
            this.workshopOptions = workshopOptions.filter(item => this.workshopList.findIndex(workshop => workshop.name === item.value) === -1)
            this.params.workshop = this.workshopOptions.length > 0 ? this.workshopOptions[0].value : null
          } else {
            this.workshopOptions = []
            this.params.workshop = null
          }
          this.isShowInnerLoading = false
        })
      }
    },
    onSubmit () {
      const params = _.cloneDeep(this.params)
      params.workshopName = this.workshopOptions.find(item => item.value === params.workshop).label
      this.$emit('selectWorkshop', params)
      this.show = false
    },
    // 重置
    onReset () {
      this.show = false
    }
  }
}
</script>

<style scoped lang="stylus">
.dialog-content .name{
  width: 100px
}
</style>
